<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 2、通过createElement()  和 appendChild()  及 innerHTML，创建如下一个表格
//document -->
    <!-- <table>
        <caption>员工信息表</caption>
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>年龄</th>
                <th><span>操作</span></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1000</td>
                <td>小明</td>
                <td>18</td>
                <td><a href="#">删除</a></td>
            </tr>
            <tr>
                <td>1001</td>
                <td>小红</td>
                <td>20</td>
                <td><a href="#">删除</a></td>
            </tr>
            <tr>
                <td>1002</td>
                <td>小红</td>
                <td>30</td>
                <td><a href="#">删除</a></td>
            </tr>
            <tr>
                <td>1003</td>
                <td>小红</td>
                <td>30</td>
                <td><a href="#">删除</a></td>
            </tr>
            
        </tbody>
    </table> -->
    <script>
        var theadarr = ['ID', '姓名', '年龄', '<span>操作</span>'];


        var tbodyarr = [
            { id: '1001', name: '王帅辉', age: 18, del: '<a href="javascript:;" class="del">删除</a>' },
            { id: '1002', name: '王超', age: 18, del: '<a href="javascript:;" class="del">删除</a>' },
            { id: '1003', name: '李京辉', age: 18, del: '<a href="javascript:;" class="del">删除</a>' }
        ]



        //1.table
        var tab = document.createElement('table');

        document.body.appendChild(tab);

        //2.caption
        var cap = document.createElement('caption');
        cap.innerHTML = '员工信息表';
        tab.appendChild(cap);

        //3. thead 
        var thead = document.createElement('thead');
        var thead_tr = document.createElement('tr');
        for (var i = 0; i < theadarr.length; i++) {
            var th = document.createElement('th');
            th.innerHTML = theadarr[i];
            thead_tr.appendChild(th);

        }
        thead.appendChild(thead_tr);
        tab.appendChild(thead);

        //4.tbody
        var tbody = document.createElement('tbody');
        tab.appendChild(tbody);

        //  通过遍历增加
        for (var j = 0; j < tbodyarr.length; j++) {
            var tr = document.createElement('tr');
            for (var k in tbodyarr[j]) {
                var td = document.createElement('td');
                td.innerHTML = tbodyarr[j][k]
                tr.appendChild(td)
            }

            tbody.appendChild(tr)

        }

        //  删除
        var dels = document.querySelectorAll('.del');
        for (var i1 = 0; i1 < dels.length; i1++) {
            dels[i1].onclick = function () {
                this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode)
            }

        }

    </script>
</body>

</html>